<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>注册</title>
    <jsp:include page="/head.jsp" />
    <link rel="stylesheet" type="text/css" href="assets/css/reg.css" />
  </head>
  <body>
    <div class="reg" id="app">
      <div class="p-5">
        <h1>注 册</h1>
        <div class="login">我有帐号；<a href="login-2.jsp">点此登录</a></div>
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="right" label-width="7em" label-suffix=" : " class="demo-ruleForm login-container pt-1">
          <el-form-item prop="userName" label="用户名">
            <el-input type="text" v-model="ruleForm2.userName" auto-complete="off" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="userPassword" label="密码">
            <el-input type="password" v-model="ruleForm2.userPassword" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item prop="userPasswordConfirm" label="密码确认">
            <el-input type="password" v-model="ruleForm2.userPasswordConfirm" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item prop="userNickname" label="昵称">
            <el-input type="text" v-model="ruleForm2.userNickname" auto-complete="off" placeholder="昵称"></el-input>
          </el-form-item>

          <el-form-item prop="code" label="验证码">
            <el-col :span="12">
              <el-input type="text" v-model="ruleForm2.code" auto-complete="off" placeholder="验证码"></el-input>
            </el-col>
            <el-col :span="12">
              <img alt="验证码" title="点击更换" :src="code" class="code-img" @click.prevent="clickCode" />
            </el-col>
          </el-form-item>
          <el-form-item style="width: 100%" label-width="0">
            <el-button type="success" style="width: 100%" @click.native.prevent="handleSubmit2" :loading="logining">注册</el-button>
          </el-form-item>
          <el-col :span="24" style="text-align:center; padding-bottom:1rem;">
            已有账号? <a href="login-2.jsp">点此登录</a>
          </el-col>
        </el-form>

      </div>
    </div>
    <script type="text/javascript">
      var api = {
        exists:(userName)=>{
          return sys.ajax("api/user/exists",{"userName":userName});
        },
        reg:(param)=>{
          return sys.ajax("api/user/reg",param);
        }
        
      };
      new Vue({
        el: "#app",
        data() {
          //密码一致校验器
          var validatePwd = (rule, value, callback) => {
            if (this.ruleForm2.userPassword != this.ruleForm2.userPasswordConfirm) {
              callback(new Error("两次输入的密码不一致"));
            } else {
              callback();
            }
          };
          //用户名是否存在校验器
          var existsUserName = (rule, value, callback) => {
            api.exists(value).then((r) => {
              if (r.data) {
                callback(new Error("用户名[" + value + "]已经存在"));
              } else {
                callback();
              }
            });
          };
          return {
            logining: false,
            code: "api/kaptcha?width=103&height=41",
            ruleForm2: {
              userName: "",
              userPassword: "",
              userPasswordConfirm: "",
              userNickname: "",
              code: "",
            },
            rules2: {
              userName: [{
                  required: true,
                  message: "请输入账号",
                },
                {
                  pattern: /^[a-zA-Z]\w{2,19}$/,
                  message: "账号必须由3-20个单词字符组成",
                },
                {
                  validator: existsUserName,
                }
              ],
              userPassword: [{
                  required: true,
                  message: "请输入密码",
                  trigger: "blur",
                },
                {
                  pattern: /^.{3,20}$/,
                  message: "密码必须由3-20个字符组成",
                }
              ],
              userPasswordConfirm: [{
                required: true,
                message: "请再次输入密码",
              }, {
                validator: validatePwd,
              }],
              userNickname: [{
                  required: true,
                  message: "请输入昵称",
                },
                {
                  pattern: /^[\u4e00-\u9fa5]{2,10}$/,
                  message: "昵称必须由2-10个中文字符组成",
                }

              ],
              code: [{
                required: true,
                message: "请输入验证码",
              }, ],
            },
            checked: true,
          };
        },
        mounted() {
          this.clickCode();
        },
        methods: {
          clickCode() {
            this.code = "api/kaptcha?width=103&height=41&v=" + new Date().getTime();
          },
          handleReset2() {
            this.$refs.ruleForm2.resetFields();
          },
          handleSubmit2(ev) {
            let _this = this;
            this.$refs.ruleForm2.validate((valid) => {
              if (!valid) {
                _this.$notify({
                  title: "验证提示",
                  message: "请先填写好登录内容",
                  position: "bottom-right",
                  type: "error",
                });
                return;
              }
              api
                .reg(this.ruleForm2)
                .then((r) => {
                  if (r.ok) {
                    _this.$notify({
                      title: "注册提示",
                      message: "注册成功",
                      position: "bottom-right",
                      type: "success",
                    });
                    this.$refs.ruleForm2.resetFields();
                  }
                })
                .catch((e) => {
                  console.info(e);
                });
            });
          },
        },

      });
    </script>
  </body>
</html>
